<template>
    <view>
        <up-grid
			:border="false"
			col="4"
        >
            <up-grid-item
				v-for="(listItem,listIndex) in list"
				:key="listIndex"
				@click="click(listItem.url)"
            >
                <up-icon
					:customStyle="{paddingTop:20+'rpx'}"
					:name="listItem.name"
					:size="22"
                ></up-icon>
                <text class="grid-text">{{listItem.title}}</text>
            </up-grid-item>
        </up-grid>
        <up-toast ref="uToastRef" />
    </view>
</template>
<script setup>  
import { ref, reactive } from 'vue';  
  
// 创建响应式数据  
const list = reactive([  
    {  
        name: 'photo',  
        title: '商品管理',
    },  
    {  
        name: 'lock',  
        title: '商品分类',
		url: '/pages/class/index'
    },  
    {  
        name: 'star',  
        title: '客户管理'  
    },  
    {  
        name: 'hourglass',  
        title: '供应商管理'  
    }  
]);  
  
// 创建对子组件的引用  
const uToastRef = ref(null);  
  
// 定义方法  
const click = (item) => {  
	console.log(item)
	uni.navigateTo({
		url:item
	})
};  
</script>
<style lang="scss">
    .grid-text {
        font-size: 14px;
        color: #909399;
        padding: 10rpx 0 20rpx 0rpx;
        /* #ifndef APP-PLUS */
        box-sizing: border-box;
        /* #endif */
    }
</style>